<template>
	<view
		v-if="pageData && pageData.list"
		:style="{ backgroundColor: pageData.bgColor, padding: `0 ${pageData.margin * 2}rpx` }">
		<!-- 单图 -->
		<view v-if="pageData.list.length == 1 && pageData.list[0].img" class="p-re">
			<image
				:src="$imgUrls(pageData.list[0].img)"
				mode="widthFix"
				:class="{ shadow: pageData.shadow == 1 }"
				:style="{ borderRadius: `${pageData.radius * 2}rpx` }"></image>
			<view
				v-for="(item, index) in pageData.list[0].area"
				:key="index"
				class="p-ab"
				@click="$banerGo(item)"
				:style="{
					width: `${item.w * 2}rpx`,
					height: `${item.h * 2}rpx`,
					left: `${item.x * 2}rpx`,
					top: `${item.y * 2}rpx`,
				}"></view>
		</view>
		<!-- 轮播 -->
		<view v-if="pageData.list.length > 1">
			<swiper
				:style="{ height }"
				indicator-dots
				indicator-color="#fff"
				:indicator-active-color="color"
				autoplay
				:interval="3000">
				<swiper-item v-for="(item, index) in pageData.list" :key="index" class="p-re">
					<image
						:src="$imgUrls(item.img)"
						mode="aspectFill"
						class="wh"
						@load="handleLoad($event, index)"
						:class="{ shadow: pageData.shadow == 1 }"
						:style="{ borderRadius: `${pageData.radius * 2}rpx` }"></image>
					<view
						v-for="(itm, idx) in item.area"
						:key="idx"
						class="p-ab"
						@click="$banerGo(itm)"
						:style="{
							width: `${itm.w * 2}rpx`,
							height: `${itm.h * 2}rpx`,
							left: `${itm.x * 2}rpx`,
							top: `${itm.y * 2}rpx`,
						}"></view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		name: 'hotZone',
		props: ['pageData'],
		data() {
			return {
				height: '',
			};
		},
		computed: {
			...mapState(['color']),
		},
		methods: {
			handleLoad(e, index) {
				if (!index) {
					const { width, height } = e.detail;
					this.height = 750 / (width / height) + 'rpx';
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.shadow {
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
	}
</style>
